<template>
    <uni-section class="mb-10" title="消费金额" type="line" padding>
        <uni-easyinput type="number" :inputBorder="false" v-model="conRecords.conAmount" placeholder="消费金额" />
    </uni-section>

    <uni-section class="mb-10" title="消费地点" type="line" padding>
        <uni-easyinput type="textarea" autoHeight v-model="conRecords.conLocation" placeholder="消费地点" />
    </uni-section>

    <uni-section class="mb-10" title="消费产品" type="line" padding>
        <uni-easyinput type="textarea" autoHeight v-model="conRecords.conProduct" placeholder="消费产品" />
    </uni-section>

    <uni-section class="mb-10" title="消费时间" type="line">
        <view class="date-body">
            <uni-datetime-picker type="date" v-model="conRecords.conTime" :border="false" />
        </view>
    </uni-section>

    <uni-section class="mb-10" title="消费类型" type="line">
        <uni-grid :column="4" :show-border="false" :square="false" :highlight="false" @change="conTypeChange">
            <uni-grid-item v-for="(item, index) in conType" :index="item.id" :key="index">
                <view class="grid-item-box">
                    <image class="image"
                           :src="item.id === this.conRecords.conTypeId ? item.typeLightIcon : item.typeDarkIcon"
                           mode="aspectFill" />
                    <text class="text">{{ item.typeName }}</text>
                </view>
            </uni-grid-item>
        </uni-grid>
    </uni-section>

    <uni-section class="mb-10" title="消费平台" type="line">
        <uni-grid :column="4" :show-border="false" :square="false" :highlight="false" @change="conPlatformChange">
            <uni-grid-item v-for="(item, index) in conPlatform" :index="item.id" :key="index">
                <view class="grid-item-box">
                    <image class="image"
                           :src="item.id === this.conRecords.conPlatformId ? item.payPlatformLightIcon : item.payPlatformDarkIcon"
                           mode="aspectFill" />
                    <text class="text">{{ item.payPlatformName }}</text>
                </view>
            </uni-grid-item>
        </uni-grid>
    </uni-section>

    <uni-section class="mb-10" title="支付渠道" type="line">
        <uni-grid :column="4" :show-border="false" :square="false" :highlight="false" @change="conPayChannelChange">
            <uni-grid-item v-for="(item, index) in conPayChannel" :index="item.id" :key="index">
                <view class="grid-item-box">
                    <image class="image"
                           :src="item.id === this.conRecords.conPayChannelId ? item.payChannelLightIcon : item.payChannelDarkIcon"
                           mode="aspectFill" />
                    <text class="text">{{ item.payChannelName }}</text>
                </view>
            </uni-grid-item>
        </uni-grid>
    </uni-section>
</template>

<script>

import UniGrid from "../../uni_modules/uni-grid/components/uni-grid/uni-grid.vue";
import UniGridItem from "../../uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue";
import UniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import UniDatetimePicker
    from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import UniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";

import {selectConType, selectConPlatform, selectConPayChannel, insertConRecords} from "../../js/api/home";
import {loading, hide, toast} from "../../js/utils/showTip";

export default {
    components: {UniEasyinput, UniDatetimePicker, UniSection, UniGridItem, UniGrid},
    data() {
        return {
            conRecords: {
                conAmount: '', // 消费金额
                conLocation: '', // 消费地点
                conProduct: '', // 消费产品
                conTime: '', // 消费时间
                conTypeId: 0, // 消费类型
                conPlatformId: 0, // 消费平台
                conPayChannelId: 0 // 支付渠道
            },
            conType: [{
                id: 0,
                typeName: '',
                typeDarkIcon: '',
                typeLightIcon: ''
            }],
            conPlatform: [{
                id: 0,
                payPlatformName: '',
                payPlatformDarkIcon: '',
                payPlatformLightIcon: ''
            }],
            conPayChannel: [{
                id: 0,
                payChannelName: '',
                payChannelDarkIcon: '',
                payChannelLightIcon: ''
            }]

        }
    },
    onLoad() {
        this.selectConType()
        this.selectConPlatform()
        this.selectConPayChannel()
    },
    onNavigationBarButtonTap() {
        if (this.conRecords.conAmount === '' || this.conRecords.conAmount === null) {
            toast('未填写消费金额', 'error', false, 600)
            return;
        }

        if (this.conRecords.conLocation === '' || this.conRecords.conLocation === null) {
            toast('未填写消费地点', 'error', false, 600)
            return;
        }


        if (this.conRecords.conProduct === '' || this.conRecords.conProduct === null) {
            toast('未填写消费产品', 'error', false, 600)
            return;
        }

        if (this.conRecords.conTime === '' || this.conRecords.conTime === null) {
            toast('未选择消费时间', 'error', false, 600)
            return;
        }

        if (this.conRecords.conTypeId === '' || this.conRecords.conTypeId === null) {
            toast('未选择消费类型', 'error', false, 600)
            return;
        }

        if (this.conRecords.conPlatformId === '' || this.conRecords.conPlatformId === null) {
            toast('未填选择消费平台', 'error', false, 600)
            return;
        }

        if (this.conRecords.conPayChannelId === '' || this.conRecords.conPayChannelId === null) {
            toast('未选择支付渠道', 'error', false, 600)
            return;
        }

        loading("录入中...", true)
        insertConRecords(this.conRecords).then(response => {
            if (response.code === 200) {
                hide();
                toast("录入成功!", "success", false, 500);
                uni.redirectTo({
                    url: "/pages/index/index"
                })
            }
        })
        console.log(JSON.stringify(this.conRecords))
    },
    methods: {
        conTypeChange(e) {
            let {index} = e.detail
            this.conRecords.conTypeId = index;
        },
        conPlatformChange(e) {
            let {index} = e.detail
            this.conRecords.conPlatformId = index;
        },
        conPayChannelChange(e) {
            let {index} = e.detail
            this.conRecords.conPayChannelId = index;
        },
        selectConType() {
            selectConType().then(response => {
                if (response.code === 200) {
                    this.conType = response.data;
                }
            })
        },
        selectConPlatform() {
            selectConPlatform().then(response => {
                if (response.code === 200) {
                    this.conPlatform = response.data;
                }
            })
        },
        selectConPayChannel() {
            selectConPayChannel().then(response => {
                if (response.code === 200) {
                    this.conPayChannel = response.data;
                }
            })
        }
    }
}
</script>

<style lang="scss">
.image {
    width: 25px;
    height: 25px;
}

.text {
    font-size: 14px;
    margin-top: 5px;
}

.grid-item-box {
    flex: 1;
    // position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.mb-10 {
    margin-bottom: 10px;
}

.date-body {
    background-color: #fff;
    padding: 10px;
}
</style>